<template>
  <div class="container">
    <div class="handle-box">

      <el-row>




        <el-col>
          <el-button style="margin-left: 1%" type="primary" class="handle-del mr10 add" @click="addFromTable">返回
          </el-button>
        </el-col >
      </el-row>

    </div>

    <div class="title">{{pageName}}</div>


    <el-table :data="tableData.slice((this.queryUser.currentPage-1)*this.queryUser.pageSize,(this.queryUser.currentPage*this.queryUser.pageSize))"  border class="table" ref="multipleTable" header-cell-class-name="table-header"
              @selection-change="handleExamUserSelectionChange" highlight-current-row>
      <el-table-column prop="userId" label="学号/工号" min-width="80" align="center"/>
      <el-table-column  label="姓名" min-width="80" align="center">
        <template slot-scope="{row}">
          {{row.user.name}}
        </template>
      </el-table-column>
      <el-table-column  label="性别" min-width="80" align="center">
        <template slot-scope="{row}">
          {{row.user.sex}}
        </template>
      </el-table-column>
      <el-table-column label="班级" min-width="100" align="center">
        <template slot-scope="{row}">
          {{row.user.clazz === null ? '':row.user.clazz.name}}
        </template>
      </el-table-column>

   <!--   <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" class="deleteButton" icon="el-icon-edit" @click="deleteSingle(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :current-page="queryUser.currentPage"
                     :page-size="queryUser.pageSize" :total="query.total" @current-change="handleExamUserChange"/>
    </div>



    <!-- 添加考试人员弹出框 -->
    <el-dialog title="添加考试人员" :visible.sync="addUserVisible" width="60%">
      <div class="handle-box">

        <el-row>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <el-input  placeholder="请输入查询关键字" class="handle-input mr10 searchLabel"/>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-button  class="searchButton" type="primary"icon="el-icon-search" @click="">搜索</el-button>
          </el-col>
        </el-row>

      </div>
      <el-table :data="userTableData.slice((this.query.currentPage-1)*this.query.pageSize,(this.query.currentPage*this.query.pageSize))"  border class="table" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="handleUserSelectionChange" highlight-current-row>
        <el-table-column  type="selection" align="center"/>
        <el-table-column prop="userId" label="学号/工号" min-width="80" align="center"/>
        <el-table-column  label="姓名" min-width="80" align="center">
          <template slot-scope="{row}">
            {{row.user.name}}
          </template>
        </el-table-column>
        <el-table-column  label="性别" min-width="80" align="center">
          <template slot-scope="{row}">
            {{row.user.name}}
          </template>
        </el-table-column>
        <el-table-column label="班级" min-width="220" align="center">
          <template slot-scope="{row}">
            {{row.user.clazz === null ? '':row.user.clazz.name}}
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.currentPage"
                       :page-size="query.pageSize" :total="query.total" @current-change="handleUserChange"/>
      </div>

      <el-row style="margin-left: 30%">
        <el-col :span="8">
          <el-button  type="primary" @click="confirmUserSelect">确定</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="info" @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import info from '../../../utils/info'
  import { getAnswersByExamId, queryExamPage } from '../../../api';
  export default {
    name: 'ExamInfo',
    data(){
      return{
        /* 考试状态 */
        /* 考试状态 */
        examId: '',
        status : '',
        paperStatus: 0,
        userTableData: [],
        addUserVisible: false,
        tableData: [],
        queryUser: {
          total: 10,
          pageSize: 7,
          currentPage: 1
        },

        query: {
          total: 10,
          pageSize: 7,
          currentPage: 1
        },
        userKeyWord: '',
        score: 0,
        page: {
          exampageId: '',
          exampageName: '',
          adviceTime: '',
          createTime: '',
          endTime: '',
          startTime: '',
          choice: [],
          multChoices: [],
          judge: [],
          pack: [],
          bigQuestion: [],
          totalScore: 0
        },
        pageName: '',
      }
    },
    created(){

    },

    activated: function() {
      this.getData();
    },

    async mounted(res) {
      let id = this.$route.query.id;
      let status = this.$route.query.status;

      this.status = status;
      this.examId = id;

      /* 根据id查询出试卷,以及试卷所属的考试人员 */
      // 渲染页面
      console.log("examInfo..." + status);
      console.log(id);
      // 0 1 2 未开始,正在进行,已经结束

      console.log(id);
      const data = await getAnswersByExamId({ examId: id });
      console.log(data);

               this.tableData = data.answers;
               this.query.total = data.answers.length;

               const page = await queryExamPage({ id });
               //console.log(page);
               this.pageName = page.examPage.exampageName;

    },
    methods: {
       async getData() {


         let id = this.examId;

         const data = await getAnswersByExamId({ examId: id });
         console.log(data);

         this.tableData = data.answers;
         this.query.total = data.answers.length;

         const page = await queryExamPage({ id });
         //console.log(page);
         this.pageName = page.examPage.exampageName;

       },
      /* 分页 */
      handleExamUserChange(val){
        /* 更换当前页 */
        this.$set(this.queryUser, 'currentPage', val);
        /*this.getData();*/
      },
      handleUserChange(val){
        this.$set(this.query, 'currentPage', val);

      },
      handleSearch(){},
      /* 单删 */
      deleteSingle(id){
        console.log(id);
        /* 发送请求删除 数据 */

        /* 数据渲染 */
      },
      /* 多删 */
      deleteSelections(){
        /* 发送用户id,批量删除 */
        console.log(this.examUserSelection);
      },

      formatSex(sex){
        console.log(sex);
        return sex === '男' ? '男': '女';
      },

      /* 多选 */
      handleExamUserSelectionChange(val){
        this.examUserSelection = val;
      },
      /* 多选(再次添加) */
      handleUserSelectionChange(val){
        this.userSelection = val;
      },
      /* 添加考试人员 */
      addFromTable(){
        /*this.addUserVisible = true;*/

        this.$router.push({path:'/examList'});

      },
      /* 添加考试人员确认 */
      confirmUserSelect(){
        console.log(this.userSelection);
        /* 发送请求 */
        this.addUserVisible = false;
      },

      onUploadChange(){
        /* 上传文件 */
      },

      cancel(){
        this.addUserVisible = false;
      }

    },
    watch:{

    }
  };
</script>

<style scoped>

  .title{
    margin-top: 2%;
    font-size: 30px;
    margin-left: 2%;
    color: gray;
  }
  .table {
    width: 100%;
    font-size: 14px;
    margin-top: 1%;
  }

  .deleteButton{
    font-size: 14px;
    color: red;
  }
  .searchButton{
    margin-left: 15%;
  }
  .deletes{
    margin-left: -45%;
  }
  .add{
    margin-left: -95%;
  }

</style>
